﻿@section Styles{
    <style>
        body {
            background-color: #f0f2f5 !important;
        }
    </style>
}

    @section Scripts{
    <input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
    <input type="hidden" value='@ViewData["isFindBack"]' id="hidden_isFindBack" />
    <script src="~/services/Framework/SysRoleMenuFunction/indexService.js"></script>


}
    <div id="app" v-cloak class="p-15">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
                <el-collapse-transition>
                    <el-card class="w100 mb-15" shadow="never" :body-style="{padding:0}" v-show="table.search.state">
                        <el-row :gutter="15" class="p-15">
                            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="pb-15">
                                <el-input v-model="table.search.vm.name" placeholder="角色名称" />
                            </el-col>
                            <!--button-->
                            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="float: right">
                                <el-button type="primary" @@click="searchEvent">查询</el-button>
                                <el-button @@click="onResetSearch">重置</el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-collapse-transition>
                <el-card class="w100" shadow="never" :body-style="{padding:0}">
                    <el-row :gutter="15" class="p-15 pb-0">
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb-15">
                            <template v-if="power.search">
                                <el-button @@click="table.search.state=!table.search.state">
                                    <i class="el-icon-arrow-up" v-if="table.search.state"></i>
                                    <i class="el-icon-arrow-down" v-else></i>
                                    检索
                                </el-button>
                            </template>
                        </el-col>
                    </el-row>
                    <el-table :data="table.data" row-key="id" @@selection-change="(array)=>{table.selectedRowKeys=array;}" @@row-dblclick="row_dblclick">
                        <el-table-column type="index" width="50" fixed></el-table-column>
                        <el-table-column type="selection" width="50" fixed></el-table-column>
                        <!--根据查询接口自动加载头部信息 start-->
                        <el-table-column prop="number" label="编号" width="120"></el-table-column>
                        <el-table-column prop="name" label="角色名称"></el-table-column>
                        <!--根据查询接口自动加载头部信息 end-->
                        <el-table-column fixed="right" label="权限" width="100">
                            <template slot-scope="scope">
                                <el-link type="primary" @@click="roleId=scope.row.id;getRoleMenuFunctionTree();">
                                    去设置
                                </el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @@size-change="(val)=>{table.rows=val;findList();}"
                               @@current-change="(val)=>{table.page=val;findList();}" :current-page="table.page"
                               :page-sizes="[10, 15, 20, 50, 100, 200, 300, 400, 1000]" :page-size="table.rows"
                               layout="total, sizes, prev, pager, next, jumper" :total="table.total" class="mt-15 ml-15 mb-15">
                    </el-pagination>
                </el-card>
            </el-col>

            <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                <el-table style="width: 100%;margin-bottom: 20px;" row-key="key" default-expand-all :data="tree"
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column prop="label" label="菜单名称" width="180">

                        <template slot-scope="scope">

                            <el-checkbox v-model="scope.row.checkAll" :indeterminate="scope.row.indeterminate" v-if="scope.row.functions.length > 0" @@change="(e) => onCheckAllChange(e, scope.row)">{{scope.row.label}}</el-checkbox>
                            <span v-else>{{ scope.row.label }}</span>

                           @* <a-checkbox v-model:checked="row.checkAll" :indeterminate="row.indeterminate" @change="(e) => methods.onCheckAllChange(e, row)" v-if="row.menuFunctions.length > 0"> 全选 </a-checkbox>*@
                        </template>

                    </el-table-column>
                    <el-table-column label="权限">
                        <template slot-scope="scope">
                            <el-checkbox-group v-model="scope.row.checkFunction" @@change="item=>saveFunctions(item,scope.row.key)">
                                <el-checkbox v-for="(item,index) in scope.row.functions" :label="item.key" :key="index">
                                    {{item.label}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>

        </el-row>
    </div>
